<template>
    <div v-loading="loading" class="edu-page-warp">
        <div class="sitemap">
            <span style="color:#C0C4CC">培养方案</span>
            <span style="color:#C0C4CC">/</span>
            <span style="color:#909399">编辑培养方案</span>
        </div>
        <div class="edu-page-title">
            <span
                v-for="(item, index) in topNavItems"
                :class="{active: item.active}"
                :key="index"
                class="border-right"
                @click="clickItem(item)"
            >{{ item.label }}</span>
        </div>
        <el-card shadow="never" body-style="padding: 24px;">
            <template v-if="projId == '1'">
                <schemeBaseInfo
                    v-if="focusIndex==0"
                    :next="next"
                    :scheme-id="id"
                    :is-draft="isDraft"
                    :is-read="isRead"
                />
                <courseCategory
                    v-if="focusIndex==1"
                    :next="next"
                    :template-id="id"
                    :data-type="2"
                    :in-change="inChange"
                    :is-read="isRead"
                    :template-id-origin="templateId"
                />
                <courseForm
                    v-if="focusIndex==2"
                    :next="next"
                    :template-id="id"
                    :cultureSchemeForcourse="cultureSchemeForcourse"
                    :data-type="2"
                    :projId="projId"
                    :in-change="inChange"
                    :is-read="isRead"
                    :template-id-origin="templateId"
                />
                <schemeChapter
                    v-if="focusIndex==3"
                    :next="next"
                    :template-id="id"
                    :data-type="2"
                    :projId="projId"
                    :in-change="inChange"
                    :is-read="isRead"
                    :template-id-origin="templateId"
                />
            </template>
        </el-card>
    </div>
</template>
<script>
import schemeBaseInfo from "./schemeBaseInfo";
import schemeChapter from "./schemeChapter";
import courseCategory from "./courseCategory";
import courseForm from "./courseForm";

import{findCultureSchemeById}from "common/src/api/culture/bachelor"
export default {
    name: "bclCultureSchemeDetail",
    components: {
        schemeBaseInfo,
        schemeChapter,
        courseCategory,
        courseForm,
    },
    data() {
        return {
            inChange: false,
            projId: this.$route.query.projId ? this.$route.query.projId : "",
            id: this.$route.query.id ? this.$route.query.id : "", // 方案id
            templateId: "", // 模板id
            focusIndex: 0,
            cultureSchemeForcourse:{
                     grade:"",
                     faculty:"",
                     profession:"",
                     trainingLevel: "1",
                     type: "1",
                     projId: "1",
                     pageNum_: 1,
                     pageSize_: 10,
                     proCodeName: ""
            },
            isDraft: true,
            isRead: true,
            topNavItems: [
                {
                    label: this.$t("message.baseInfo"),
                    index: 0,
                    active: true
                },
                {
                    label: this.$t("message.creditSetting"),
                    index: 1,
                    active: false
                },
                {
                    label: this.$t("message.courseSetting"),
                    index: 2,
                    active: false
                },
                {
                    label: this.$t("message.schemeChapter"),
                    index: 3,
                    active: false
                }
            ]
        };
    },
    created() {
        findCultureSchemeById({ id: this.id }).then(res => {
            if (res && res.code === 200) {
                let cultureScheme = res.data;
                this.cultureSchemeForcourse.grade = cultureScheme.grade;
                this.cultureSchemeForcourse.faculty =cultureScheme.faculty;
                 this.cultureSchemeForcourse.profession = cultureScheme.major;
                this.isRead =
                    cultureScheme.status === "2" ||
                    cultureScheme.status === "3";
                if (cultureScheme.status === "1" || cultureScheme.status === "5") {
                    this.isDraft = true;
                }
                this.templateId = cultureScheme.templateId;
                if (cultureScheme.status == "5") this.inChange = true;
            }
        });
    },
    methods: {
        clickItem(item) {
            this.topNavItems.forEach(nav => {
                nav.active = false;
            });
            item.active = true;
            this.focusIndex = item.index;
        },
        next(val = 1) {
            const len = this.topNavItems.length;
            if (val > 0) {
                if (this.focusIndex + 1 < len) {
                    this.focusIndex++;
                    this.toggle(this.focusIndex);
                }
            } else {
                if (this.focusIndex - 1 >= 0) {
                    this.focusIndex--;
                    this.toggle(this.focusIndex);
                }
            }
        },
        // 切换
        toggle(index) {
            this.topNavItems.forEach(item => {
                item.active = item.index === index;
            });
            this.focusIndex = index;
        }
    }
};
</script>
<style lang="scss" scoped>
.sitemap {
    font-size: 12px;
    margin-bottom: 15px;
}
.edu-page-title {
     margin-bottom: -1px;
    span {
        cursor: pointer;
        display: inline-block;
        padding-right: 20px;
        color: #8896a7;
        font-weight: 400;
        border-right: 0;
        font-size: 16px;
    }
    span.active {
        padding: 8px 15px;
        color: #66b1ff;
        background: #fff;
        font-weight: 500;
        font-size: 16px;

    }
}

.border-right {
    margin-right: 10px;
}
</style>
